<template>
    <div class="findPwd">
        <el-form :model="findPwdForm" ref="findPwdForm" :rules="findPwdFormRules" v-if="!confirmCorrect">
            <el-form-item prop="mobile">
                <el-input v-model="findPwdForm.mobile" placeholder="手机号" class="font-big">
                    <i slot="prefix" class="login-icon el-icon-phone"></i>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="findPwdForm.confirmCode" placeholder="验证码" class="font-big findPwd-item-left">
                    <i slot="prefix" class="el-icon-edit"></i>
                </el-input>
                <el-button class="findPwd-item-end ml8" @click="getConfirmCode" v-if="isTimeOut">获取验证码</el-button>
                <el-button class="findPwd-item-end" disabled v-if="!isTimeOut">{{countdown}}s</el-button>

            </el-form-item>
            <el-form-item prop="remember">
                <div class="findPwd-space-between">
                    <el-checkbox v-model="findPwdForm.remember">自动登录</el-checkbox>
                    <span>想起密码了，<el-button type="text" @click="$router.push({ name: 'login' })">立即登录</el-button></span>
                </div>
            </el-form-item>
            <el-button type="primary" class="findPwd-btn" @click="toValid">验证</el-button>
        </el-form>
        <el-form :model="resetPwdForm" ref="resetPwdForm" :rules="resetPwdFormRules" v-if="confirmCorrect">
            <el-form-item>
                <el-input v-model="resetPwdForm.password" placeholder="密码" class="font-big" type="password">
                    <i slot="prefix" class="el-icon-edit"></i>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="resetPwdForm.passwordConfirm" placeholder="确认密码" class="font-big" type="password">
                    <i slot="prefix" class="el-icon-edit"></i>
                </el-input>
            </el-form-item>
            <el-form-item prop="remember">
                <div class="findPwd-space-between">
                    <el-checkbox v-model="resetPwdForm.remember">自动登录</el-checkbox>
                    <span>想起密码了，<el-button type="text" @click="$router.push({ name: 'login' })">立即登录</el-button></span>
                </div>
            </el-form-item>
            <el-button type="primary" class="findPwd-btn" @click="confirmUpdate">确认重置</el-button>
        </el-form>
    </div>
</template>
<script type="text/javascript">
    export default {
        name: 'findPwdComponent',
        data() {
            const checkMobile = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入手机号'));
                } else {
                    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                    console.log(reg.test(value));
                    if (reg.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入正确的手机号'));
                    }
                }
            };

            return {
                findPwdForm: {
                    mobile: "",
                    confirmCode: "",
                    remember: false
                },
                resetPwdForm: {
                    password: "",
                    passwordConfirm: "",
                    remember: false
                },
                findPwdFormRules: {
                    mobile: [{
                        required: true,
                        validator: checkMobile,
                        trigger: 'blur'
                    }],
                },
                resetPwdFormRules: {},
                isTimeOut: true,
                countdown: 60,
                confirmCorrect: false,
                trueCode: ''
            }
        },
        methods: {
            getConfirmCode() {
                this.isTimeOut = false;
                this.$axios.get('/api/api/common/mobileCode?mobile=' + this.findPwdForm.mobile).then(res => {
                    this.trueCode = res.data.msg;
                    let timer = setInterval(() => {
                        this.countdown--;
                        if (this.countdown <= 0) {
                            this.isTimeOut = true;
                            clearInterval(timer);
                        }
                    }, 1000);
                })

            },
            toValid() {
                if (this.findPwdForm.confirmCode === this.trueCode) {
                    this.confirmCorrect = true;
                } else {
                    this.$message.error('验证码错误');
                }
            },
            confirmUpdate() {
                console.log(this.$api.user.pwdUpdate)
                this.$api.user.pwdUpdate({
                    "mobile": this.findPwdForm.mobile,
                    "mobileCode": this.findPwdForm.confirmCode,
                    "password": this.resetPwdForm.password
                }).then(res => {
                    this.$message.success('更新成功');
                    this.$router.push({name: 'login'});
                })
            }
        },
        created() {

        },
        mounted() {

        },
        watch: {}
    }

</script>
<style rel="stylesheet/scss" lang="scss">
    .findPwd {
        .el-input {
            border-radius: 4px;
        }

        &-item-end {
            float: right;
            width: 102px;
            padding: 11px 8px;
            height: 40px;
        }
        &-item-left {
            float: left;
            width: 258px;
        }
        &-space-between {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-flow: row nowrap;
        }
        &-btn {
            width: 100%;
        }
        .el-input__prefix {
            top: 10px;
        }
    }
</style>
